<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../../common/base_body_header.jsp" %>
<%@include file="../../common/navbar.jsp" %>
<%@include file="../../common/page_content_pre.jsp" %>

<link rel="stylesheet" href="${GLOBAL.staticJsPath}/assets/qiniu/fileupload.css"/>

<div class="page-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="widget-box">
                <div class="widget-header">
                    <h4>修改个人信息</h4>
                </div>

                <div class="widget-body">
                    <div class="widget-main no-padding">
                        <form class="form-horizontal" role="form" action="${GLOBAL.basePath}/auth/modifyUser"
                              method="post" id="sysUserForm">
                            <input name="userId" type="hidden" value="${sysUser.userId}"/>
                            <fieldset>
                                <fieldset>
                                    <input id="headPhotoId" name="headPhoto" type="hidden" value="${user.headPhoto}">

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">用户头像：</label>
                                        <div class="col-sm-6">
                                            <div id="photos" class="row" style="width:750px">
                                                <div id="headPhotoIdDiv" class="col-xs-4"><img
                                                        id="${user.headPhoto}"
                                                        src="${storeUrl}${user.headPhoto}?imageView2/0/w/160/h/160">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>

                                <fieldset>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">门店：</label>

                                        <div class="col-sm-4">
                                            <input class="form-control" id="s_deptName" name="deptName" type="text"
                                                   placeholder="请输入用户名" value="${dept.deptName}" readonly/>
                                        </div>
                                    </div>
                                </fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">用户名：</label>

                                    <div class="col-sm-4">
                                        <input class="form-control" id="s_name" name="name" type="text"
                                               placeholder="请输入用户名" value="${sysUser.username}" readonly/>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">联系方式：</label>

                                    <div class="col-sm-4">
                                        <input class="form-control" id="mobile" name="mobile" type="text"
                                               value="${user.mobile}" placeholder="请输入联系方式"/>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">微信号：</label>

                                    <div class="col-sm-4">
                                        <input class="form-control" id="wechatNo" name="wechatNo" type="text"
                                               value="${user.wechatNo}" placeholder="请输入微信号"/>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">职位：</label>

                                    <div class="col-sm-4">
                                        <input class="form-control" id="roleName" disabled="disabled"
                                               name="name" type="text" value="${role.name}"/>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">绑定地址：</label>

                                    <div class="col-sm-4">
                                        <input class="form-control" id="bindMac" disabled="disabled"
                                               name="bindMac" type="text" value="${sysUser.bindMac}"/>
                                    </div>
                                </div>
                            </fieldset>
                            <div class="form-actions center">
                                <button type="button" class="btn btn-sm btn-grey" id="go_back_btn">
                                    返回
                                    <i class="icon-reply icon-on-right bigger-110"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-success" id="save_btn">
                                    保存
                                    <i class="icon-save icon-on-right bigger-110"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%@include file="../../common/page_content_suf.jsp" %>
<%@include file="../../common/script.jsp" %>

<script type="text/javascript" src="${GLOBAL.staticJsPath}/assets/qiniu/plupload.full.min.js"></script>
<script type="text/javascript" src="${GLOBAL.staticJsPath}/assets/qiniu/moxie.min.js"></script>
<script type="text/javascript" src="${GLOBAL.staticJsPath}/assets/qiniu/qiniu.min.js"></script>

<script type="text/javascript">
    var qiniuDomain = '${GLOBAL.basePath}';
    var qiniuPath = '${GLOBAL.qiniuPath}';
    var flag = '${flag}';


    function goBack() {
        document.location.href = "${GLOBAL.basePath}/sysuser/list";
    }

    jQuery(function ($) {
        if(flag == '0'){
            layer.alert("修改失败");
        }else if(flag == '1'){
            layer.alert("修改成功");
        };

        $("#save_btn").on("click", function () {
            $(this).closest('form').submit();
        });

        $("#go_back_btn").on("click", function () {
            goBack();
        });

        $("#sysUserForm").validate({
            rules: {}
        });

        var uploader = Qiniu.uploader({
            disable_statistics_report: false,   // 禁止自动发送上传统计信息到七牛，默认允许发送
            runtimes: 'html5,flash,html4',      // 上传模式,依次退化
            browse_button: 'headPhotoIdDiv',         // 上传选择的点选按钮，**必需**
            // 在初始化时，uptoken, uptoken_url, uptoken_func 三个参数中必须有一个被设置
            // 切如果提供了多个，其优先级为 uptoken > uptoken_url > uptoken_func
            // 其中 uptoken 是直接提供上传凭证，uptoken_url 是提供了获取上传凭证的地址，如果需要定制获取 uptoken 的过程则可以设置 uptoken_func
            // uptoken : '<Your upload token>', // uptoken 是上传凭证，由其他程序生成
            // uptoken_url: '/uptoken',         // Ajax 请求 uptoken 的 Url，**强烈建议设置**（服务端提供）
            uptoken_url: qiniuDomain + "/qiniu/token",
            get_new_uptoken: false,             // 设置上传文件的时候是否每次都重新获取新的 uptoken
            // downtoken_url: '/downtoken',
            // Ajax请求downToken的Url，私有空间时使用,JS-SDK 将向该地址POST文件的key和domain,服务端返回的JSON必须包含`url`字段，`url`值为该文件的下载地址
            // unique_names: true,              // 默认 false，key 为文件名。若开启该选项，JS-SDK 会为每个文件自动生成key（文件名）
            // save_key: true,                  // 默认 false。若在服务端生成 uptoken 的上传策略中指定了 `save_key`，则开启，SDK在前端将不对key进行任何处理
            domain: 'bs-pro',     // bucket 域名，下载资源时用到，如：'http://xxx.bkt.clouddn.com/' **必需**
            container: 'photos',             // 上传区域 DOM ID，默认是 browser_button 的父元素，
            max_file_size: '20mb',             // 最大文件体积限制
            flash_swf_url: 'path/of/plupload/Moxie.swf',  //引入 flash,相对路径
            max_retries: 3,                     // 上传失败最大重试次数
            dragdrop: true,                     // 开启可拖曳上传
            drop_element: 'photos',          // 拖曳上传区域元素的 ID，拖曳文件或文件夹后可触发上传
            chunk_size: '4mb',                  // 分块上传时，每块的体积
            auto_start: true,                   // 选择文件后自动上传，若关闭需要自己绑定事件触发上传,
            filters: {
                mime_types: [ // 只允许上传图片文件
                    {
                        title: "图片文件",
                        extensions: "jpg,gif,png"
                    }]
            },
            //x_vars : {
            //    自定义变量，参考http://developer.qiniu.com/docs/v6/api/overview/up/response/vars.html
            //    'time' : function(up,file) {
            //        var time = (new Date()).getTime();
            // do something with 'time'
            //        return time;
            //    },
            //    'size' : function(up,file) {
            //        var size = file.size;
            // do something with 'size'
            //        return size;
            //    }
            //},
            init: {
                'FilesAdded': function (up, files) {
                    plupload.each(files, function (file) {
                        // 文件添加进队列后,处理相关的事情
                        //console.log("FilesAdded");
                        addFileToQueue(file.id);
                    });
                },
                'BeforeUpload': function (up, file) {
                    // 每个文件上传前,处理相关的事情
                    //console.log("BeforeUpload");
                },
                'UploadProgress': function (up, file) {
                    // 每个文件上传时,处理相关的事情
                    //console.log("UploadProgress");
                },
                'FileUploaded': function (up, file, info) {
                    //console.log("FileUploaded" + info);
                    uploadSuccess(file.id, JSON.parse(info).key, "");

                    //

                    // 每个文件上传成功后,处理相关的事情
                    // 其中 info.response 是文件上传成功后，服务端返回的json，形式如
                    // {
                    //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                    //    "key": "gogopher.jpg"
                    //  }
                    // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

                    // var domain = up.getOption('domain');
                    // var res = parseJSON(info.response);
                    // var sourceLink = domain + res.key; 获取上传成功后的文件的Url
                },
                'Error': function (up, err, errTip) {
                    //上传出错时,处理相关的事情
                    //console.log("Error");
                    uploadError(file.id, err);
                },
                'UploadComplete': function () {
                    //console.log("UploadComplete");
                    //队列文件处理完毕后,处理相关的事情
                },
                'Key': function (up, file) {
                    // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                    // 该配置必须要在 unique_names: false , save_key: false 时才生效
                    var data = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
                        "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K",
                        "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V",
                        "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g",
                        "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r",
                        "s", "t", "u", "v", "w", "x", "y", "z"];
                    var result = "";
                    for (var i = 0; i < 20; i++) {
                        var r = Math.floor(Math.random() * 62); // 取得0-62间的随机数，目的是以此当下标取数组data里的值！
                        result += data[r]; // 输出20次随机数的同时，让rrr加20次，就是20位的随机字符串了。
                    }

                    var date = new Date();
                    var _key = result.substr(0, 10) + date.getTime()
                        + result.substr(10, 10);
                    //console.log("file" + _key);
                    return _key;
                }
            }
        });
    });

    function deletePic(div) {
        div.remove();
    }

    function addFileToQueue(id) {
        $("#headPhotoIdDiv").empty();
        var content = "<img src=\"/images/add_bg.png\"><div class=\"q-label\"><input value=\"正在上传...\"></div>";
        $("#headPhotoIdDiv").prepend(content);
    }

    function uploadSuccess(id, key, des) {
        $("#headPhotoIdDiv").empty();
        var url = "http://qiniu.bieshuwang.com/" + key + "?imageView2/0/w/160/h/160";
        var content = "<img id=" + key + " src=" + url + "><div class=\"q-label\"><input value=" + des + "></div><div class=\"delete\" onclick=\"deletePic($(this).parent())\"></div>";
        $("#headPhotoIdDiv").prepend(content);
        $("#headPhotoId").val(key);
    }

    function uploadError(id, error) {
        //$("#" + id).empty();
    }
</script>
